<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    message={{message}}
    <my-component @childByValue="parentByValue"></my-component>
</div>
<template id="my">
    <div>
        <button @click="childrenClick">单击更新父组件</button>
    </div>
</template>
<script>
    Vue.component('my-component', {
        template:'#my',
        data(){
            return{
                childValue:'来自子组件的数据'
            }
        },
        methods:{
            // 向父组件发送事件消息
            // 参数1 表示自定义事件名称
            // 参数2 表示向父组件传递的附加数据
            childrenClick() {
                this.$emit('childByValue',this.childValue)
            }
        }
    })
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
        methods:{
            parentByValue(arr){
                this.message = arr
                console.log(this.message)
            }
        }
    })
</script>
</body>
</html>
